<template>
    <div class="reg-body">
        <div class="reg-rego">
            <h1>学成在线</h1>
        </div>
        <div class="reg-sregan">
            <h1>用教育</h1>
            <h2>让世界变得更美好</h2>
        </div>
        <div class="reg-help">
            <a href="#">帮助中心</a>&nbsp;&nbsp;&nbsp;
            <span>|</span>&nbsp;&nbsp;&nbsp;
            <a href="#">人工客服</a>
        </div>
        <form class="reg-content" name="regForm">
            <div class="reg-welcome">
                <h1>欢迎注册</h1>
                <p>
                    <span>已有帐号?</span>
                    <router-link :to="{ name: 'login' }">点击登录</router-link>
                </p>
            </div>
            <div class="reg-form">
                <label for="username">用户名</label> &nbsp; <input v-model="regInfo.username" name="username" id="username" type="text" placeholder="请设置用户名"><br>
                <label for="phonenumber">手机号</label> &nbsp; <input v-model="regInfo.phone" name="phone" id="phonenumber" type="tel" placeholder="请输入您的手机号码"><br>
                <label for="password">密 &nbsp;&nbsp;码</label> &nbsp; <input v-model="regInfo.password" name="password" id="password" type="password" placeholder="请设置登录密码"><br>
                <label for="email">邮 &nbsp;&nbsp;箱</label> &nbsp; <input v-model="regInfo.email" name="email" id="email" type="email" placeholder="请输入您的邮箱获取验证码">
            </div>
            <div class="reg-button">
                <input type="button" value="注册" name="register" @click="regSubmit">
            </div>
        </form>
    </div>
</template>

<style scoped>

    * {
        margin: 0;
        padding: 0;
    }

    .reg-body {
        height: 1080px;
        background: url(../../public/pic/注册banner.jpg) no-repeat;
        background-size: cover;
    }

    a {
        color: #ffffff;
        text-decoration: none;
    }

    .reg-rego {
        position: absolute;
        top: 80px;
        left: 100px;
        color: #ffffff;
        font-style: italic;
        font-size: 15px;
    }

    .reg-sregan {
        position: absolute;
        top: 300px;
        left: 300px;
        color: #ffffff;
    }

    .reg-sregan h1 {
        font-size: 50px;
    }

    .reg-sregan h2 {
        font-size: 36px;
        font-weight: 400;
    }

    .reg-help {
        position: absolute;
        bottom: 90px;
        left: 100px;
        font-size: 12px;
        color: #ffffff;
    }

    .reg-content {
        background: rgba(255, 255, 255, .9);
        position: absolute;
        right: 150px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 2%;
        width: 480px;
        height: 680px;
    }

    .reg-content>div {
        margin-left: 40px;
    }

    .reg-content .reg-welcome {
        margin-top: 60px;
    }

    .reg-content .reg-welcome h1 {
        font-size: 35px;
    }

    .reg-content .reg-welcome p {
        margin-top: 2px;
        font-size: 13px;
    }

    .reg-content .reg-welcome p span {
        color: #9b9b9b;
    }

    .reg-content .reg-welcome p a {
        color: #2e58ff;
    }

    .reg-content .reg-form {
        margin-top: 30px;
        overflow: hidden;
    }

    .reg-content .reg-form input{
        margin-top: 45px;
        text-indent: 10px;
        height: 40px;
        width: 345px;
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }

    .reg-content .reg-form button {
        margin-left: 10px;
        background-color: #fff;
        height: 40px;
        width: 125px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .reg-content .reg-form input:hover {
        border: 1px solid #2e58ff;
        outline: 1px solid #2e58ff;
    }

    .reg-content .reg-form input::placeholder {
        font-size: 15px;
        opacity: .4;
    }

    .reg-content .reg-button {
        margin-top: 60px;
    }

    .reg-content .reg-button input {
        width: 400px;
        height: 50px;
        background-color: #3f89ec;
        color: #fff;
        font-weight: 550;
        font-size: 16px;
        border: none;
        outline: none;
        cursor: pointer;
    }

</style>

<script>

    import config from '../config.js'
    
    export default {
        data() {
            return {
                regInfo: {
                    username: '',
                    phone: '',
                    password: '',
                    email: ''
                }
            }
        },
        created() {
            
        },
        methods: {
            regSubmit () {
                this.$http.post(config.baseURL+'users/register',  this.regInfo).then(res => {
                    if(res.data.res) {
                        this.$message({
                            showClose: true,
                            message: '注册成功！',
                            type: 'success'
                        })
                    }
                    else {
                        this.$message({
                            showClose: true,
                            message: '注册失败！',
                            type: 'error'
                        })
                    }
                })
            }
        }
    }

</script>